<template>
    <router-link to="/">
        <div class="content">
            <div class="thumb">
                <img :src="data.img" :alt="data.title">
            </div>
            <h3 class="title">
                {{data.title}}
            </h3>
            <p class="desc">{{data.desc}}</p>
            <div class="price">
                <span>{{data.price}}</span>元
                <del v-if="data.unPrice">{{data.unPrice}}元</del>
            </div>
        </div>
    </router-link>
</template>

<script>
    export default {
        name: "product",
        props:['data','index']
    }
</script>

<style scoped lang="scss">
    .rainbow-item-1{
        border-top-color: #ffac13;
    }
    .rainbow-item-2 {
        border-top-color: #83c44e;
    }
    .rainbow-item-3 {
        border-top-color: #2196f3;
    }
    .rainbow-item-4 {
        border-top-color: #e53935;
    }
    .rainbow-item-5 {
        border-top-color: #00c0a5;
    }
    a{
        display: block;
        height: 300px;
        width: 234px;
        margin-right: 14px;
        padding-top: 39px;
        position: relative;
        text-align: center;
        background-color: #fff;
        border-top-width: 1px;
        border-top-style: solid;
        .content{
            .thumb{
                display: block;
                width: 160px;
                margin: 0 auto 22px;
                img{
                    width: 160px;
                    height: 160px;
                }
            }
            .title{
                margin: 0 20px 3px;
                font-size: 14px;
                font-weight: 400;
                text-overflow: ellipsis;
                color: #212121;
                overflow: hidden;
                white-space: nowrap;
            }
            .desc{
                height: 18px;
                margin: 0 20px 12px;
                font-size: 12px;
                text-overflow: ellipsis;
                color: #b0b0b0;
                overflow: hidden;
                white-space: nowrap;
            }
            .price{
                margin: 0;
                color: #ff6709;
                del{
                    color: #b0b0b0;
                }
            }
        }
    }
</style>